﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Complex Sample</title>
    <script src="../Scripts/jQuery-2.0.3.min.js" type="text/javascript"></script>
    <script src="../scripts/Subtract.min.js" type="text/javascript"></script>
    <style>
        html, body, div {
            margin: 0px;
            padding: 0px;
            border: 0px none;
        }

        body {
            background: white;
        }

        a {
            color: white;
            font-family: sans-serif;
            background: black;
            padding: 2px;
            margin: 2px;
            line-height: 24px;
        }

        .useGreen {
            height: 150px;
            width: 150px;
            background: green;
            font-weight: bold;
        }

        .useRed {
            height: 50px;
            width: 70px;
            margin: 0px;
            padding: 0px;
            border: 0px none;
            background: red;
        }

        #movable {
            border: 5px solid black;
            border-radius: 50px 50px;
            margin: 15px;
            padding: 25px;
        }

        .otherPanes {
            border: 5px solid black;
            border-radius: 50px 50px;
            margin: 15px;
            padding: 25px;
        }

        #bottomPane {
            background: blue;
            height: 56px;
            color: white;
        }

        #leftPane {
            background: orange;
            width: 75px;
        }

        #main {
            background: white;
            overflow: auto;
            z-index: 5;
        }

        #wholePage {
            margin: 5px;
            border: 5px solid black;
            border-radius: 50px 50px;
            background: white;
            overflow: hidden;
        }

        #content {
            border: 1px solid black;
            margin: 50px;
            background: #EEEEEE;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $(".movelink").click(function () { SetFill($("#movable"), $(this).data("movedirection")); });

            $("#setRed").click(function () {
                var movable = $("#movable");
                ChangeCssClass(movable, "useRed");
            });

            $("#setGreen").click(function () {
                var movable = $("#movable");
                ChangeCssClass(movable, "useGreen");
            });

            $(".hideLeftPane").click(function () {
                HideShow("#leftPane", "left");
            });
        });

        function ChangeCssClass(element, newClass) {
            if (element == 0) {
                return;
            }

            SubtractJS.ClearSubtractJS(element, true);

            element
                .removeClass("useRed")
                .removeClass("useGreen")
                .addClass(newClass)
                .addClass(element.data("edge"));

            SubtractJS
                .UpdateLayout();
        }

        function SetFill(item, edge) {
            $(item)
                .removeClass("sj-fill-top")
                .removeClass("sj-fill-bottom")
                .removeClass("sj-fill-left")
                .removeClass("sj-fill-right")
                .addClass("sj-fill-" + edge)
                .data("edge", "sj-fill-" + edge);

            SubtractJS.UpdateLayout();
        }

        function HideShow(id, direction) {
            var options = {
                "duration": 100,
                "progress": SubtractJS.UpdateLayout,
                "complete": SubtractJS.UpdateLayout
            };

            var properties = {};

            if (direction == "height") {
                properties = {
                    "height": "toggle",
                    "margin-top": "toggle",
                    "margin-bottom": "toggle",
                    "padding-top": "toggle",
                    "padding-bottom": "toggle",
                    "border-top-width": "toggle",
                    "border-bottom-width": "toggle"
                };
            } else {
                properties = {
                    "width": "toggle",
                    "margin-left": "toggle",
                    "margin-right": "toggle",
                    "padding-left": "toggle",
                    "padding-right": "toggle",
                    "border-left-width": "toggle",
                    "border-right-width": "toggle"
                }
            }

            $(id).animate(properties, options);
        }
    </script>
</head>
<body>
    <div id="wholePage" class="sj-fill">
        <div id="content" class="sj-fill">
            <div id="movable" class="sj-fill-top useRed" data-edge="sj-fill-top">
                1st to subtract:<br />
                &nbsp;
                Move this element:
                [<a class="movelink" data-movedirection="left" href="#">Left</a>]
                [<a class="movelink" data-movedirection="right" id="moveright" href="#">Right</a>]
                [<a class="movelink" data-movedirection="top" id="movetop" href="#">Top</a>]
                [<a class="movelink" data-movedirection="bottom" id="movebottom" href="#">Bottom</a>]
                &nbsp;
                Change this element style:
                [<a id="setRed" href="#">Style 1</a>]
                [<a id="setGreen" href="#">Style 2</a>]

            </div>
            <div id="bottomPane" class="sj-fill-bottom otherPanes">
                2nd to subtract.  Fill bottom.
            </div>
            <div id="leftPane" class="sj-fill-left otherPanes">
                [<a class="hideLeftPane" href="#">Hide</a>]
                3rd to subtract.  Fill left.
            </div>
            <div id="main" class="sj-fill otherPanes">
                4th to subtract.  Fill all remaining.
                <a class="hideLeftPane">Show/Hide Orange Section</a><br />
                <br />
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum commodo lobortis. Suspendisse tellus nisl, blandit in augue quis, laoreet hendrerit odio. Donec eget rhoncus erat. Nulla at dignissim mauris. Donec non lectus eu nibh bibendum dictum. Morbi diam velit, placerat vitae ligula sit amet, hendrerit congue mauris. Duis ut eros quis mi eleifend mattis ac a massa. Duis dapibus enim quis nisl sollicitudin malesuada. Vivamus nec neque non elit congue facilisis in vitae dui.
            </div>
        </div>
    </div>
</body>
</html>
